<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>匹配特定属性为特定值的元素</title>
		<style>
			input[type=button]{
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: center;
				display: block;
				cursor: pointer;
				font-size: 12px;
				width: 300px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
			h1,p{
				border: 1px solid red;
				width: 800px;
				height: 50px;
				line-height: 50px;
				font-size: 14px;
				font-weight: normal;
				font-family: "微软雅黑";
				
			}
		</style>
	</head>
	<body>
		<h1 class="abc" hobby="basketball">具有class属性 class属性的值为abc</h1>
		<h1 class="xyz" hobby="football" age="33">具有class属性 class属性的值为xyz</h1>
		
		<input type="button" onclick="search();" value="== 匹配class属性的值为xyz的元素 ==" />
		<br>
			
		<input type="button" onclick="search2();" value="== 匹配hobby属性的值为basketball的元素 ==" />
		<br>
			
	</body>
	
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
		function search(){
			var $elements =$("h1[class='xyz']");
			
			var domElement = $elements[0];
			console.log(domElement.outerHTML);
			domElement.textContent = domElement.outerHTML;
			
			$elements.css("background-color","#ef5b00").css("color","white");
		}
		
		function search2(){
			var $elements =$("h1[hobby='basketball']");
			
			var domElement = $elements[0];
			console.log(domElement.outerHTML);
			domElement.textContent = domElement.outerHTML;
			
			$elements.css("background-color","#ef5b00").css("color","white");
		}
		
	</script>
</html>

<!--
	作者：offline
	时间：2016-05-26
	描述：匹配特定属性为特定值的元素
	
	1：记得要加[]
	2：属性名称='属性值'

-->
